'use strict';

import React, {Component, PropTypes} from 'react';
import {Badge, Close} from 'amazeui-react';

export default class Tags extends Component {
	/*
	 * 构造函数。
	 *
	 * @param props 组件属性
	 */
	constructor(props) {
		super(props);
		this.state = {
			tags: [].concat(this.props.data)
		};
		this.add = this.add.bind(this);
		this.get = this.get.bind(this);
	}

	/*
	 * 添加标签。
	 *
	 * @param name 标签名
	 */
	add(name) {
		let tags = this.state.tags;
		tags.push(name);
		this.setState({
			tags: tags
		});
	}

	/*
	 * 获取标签值。
	 */
	get() {
		return this.state.tags;
	}

	/*
	 * 删除标签。
	 *
	 * @param index 被删除标签的索引
	 */
	delete(index) {
		let tags = this.state.tags;
		tags.splice(index, 1);
		this.setState({
			tags: tags
		});
	}

	/*
	 * 渲染视图。
	 */
	render() {
		let tags = [];

		for (let i = 0; i < this.state.tags.length; i++) {
			tags.push(
				<Badge 
					key={i}
					radius
					className="am-margin-vertical-xs am-margin-right-xs"
				>
					{this.state.tags[i]}
					<Close 
						spin
						onClick={e => {
							e.preventDefault();
							this.delete(i);
						}}
					/>
				</Badge>
			);
		}

		return (
			<div>{tags}</div>
		);
	}
}

Tags.propTypes = {
	data: PropTypes.array
};
Tags.defaultProps = {
	data: []
};
